<template>
  <el-upload
      v-model:file-list="fileList"
      class="upload-demo"
      :action="uploadData.host"
      :data="uploadData"
      :before-upload="handleBeforeUpload"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :on-change="handleChange"
      :on-success="handleSuccess"
      list-type="picture"
      multiple
  >
    <el-button type="primary">Click to upload</el-button>

    <template #tip>
      <div class="el-upload__tip">
        jpg/png files with a size less than 500kb
      </div>
    </template>
  </el-upload>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

import type {UploadFile, UploadProps} from 'element-plus'
import {getOssPolicy} from "@/api/oss.ts";
import {UploadFiles} from "element-plus/es/components/upload/src/upload";


// 阿里云对象存储 OSS 文件地址格式   https://lcqh-wallpaper.oss-cn-beijing.aliyuncs.com/backgrounds/0494e945880511ebb6edd017c2d2eca2.png
const fileList = ref<UploadFile[]>([])


// 客户端上传签名信息
const uploadData = ref({
  host: 'https://lcqh.oss-cn-shenzhen.aliyuncs.com',
  policy: '',
  signature: '',
  OSSAccessKeyId: '',
  key: '',
  dir: '',
});

// const filename = uploadData.value.host + uploadData.value.dir + filename


const handleChange = (uploadFile: UploadFile) => {
  if (!fileList.value.some(file => file.name === uploadFile.name)) {
    console.log("uploadFile name: ", uploadFile.name);
    console.log("uploadFile url: ", uploadFile.url);
    fileList.value.push(uploadFile);
  } else {
    console.log("File already exists in the list.");
  }
}

// 上传文件之前的钩子，参数为上传的文件
const handleBeforeUpload: UploadProps['beforeUpload'] = (file) => {
  return new Promise((resolve) => {
    // 验证文件类型
    const fileType = file.name.slice(file.name.lastIndexOf('.'));
    if (fileType !== '.jpg' && fileType !== '.png') {
      ElMessage.error('文件格式不正确，请上传jpg/png格式的图片');
      resolve(false);
    }
    // 验证文件大小
    if (file.size > 500 * 1024) {
      ElMessage.error('文件大小不能超过500KB');
    }

    // 获取签名信息
    const filename = file.name
    console.log("filename", filename)
    getOssPolicy().then(response => {
      console.log("获取签名信息成功", response.data);
      uploadData.value.host = response.data.host;
      uploadData.value.policy = response.data.policy;
      uploadData.value.signature = response.data.signature;
      uploadData.value.OSSAccessKeyId = response.data.accessId;
      uploadData.value.dir = response.data.dir;
      // 生成文件名，作为 key 使用
      uploadData.value.key = response.data.dir + filename;
      console.log("beforeUpload 测试", uploadData.value)
    }).catch(error => {
      console.log(error);
    });
  })
}

const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}

const handlePreview: UploadProps['onPreview'] = (file) => {
  console.log(file)
}

const handleSuccess: UploadProps['onSuccess'] = (res, file, fileList) => {
  ElMessage.success('上传成功')
}

const handleError: UploadProps['onError'] = (err, file, fileList) => {
  ElMessage.error('上传失败')
}
</script>
